<div class="drawer" th:with="drawerConfig=${theme.config.drawer}">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
        <!-- Page content here -->
        <label for="my-drawer" class="drawer-button">
            <img class="h-5 w-5" th:if="${!#strings.isEmpty(site.logo)}" th:src="${site.logo}" alt="Logo"/>
            <div th:if="${#strings.isEmpty(site.logo)}">
                <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor">
                    <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h7" />
                </svg>
            </div>
        </label>
    </div>
    <div class="drawer-side z-50">
        <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
        <div class="min-h-full w-72 p-4"
             th:classappend="
                 'bg-opacity-' + ${drawerConfig.bg_opacity}
                 + ' bg-' + ${drawerConfig.bg_color}
                 + ' ' + ${drawerConfig.text_color}"
             id="menu-drawer" >
            <div class="menu" th:with="menu = ${menuFinder.getPrimary()}">
                <ul th:with="menuItems = ${menu.menuItems}">
                    <!-- Sidebar content here -->
                    <li th:each="menuItem : ${menuItems}">
                        <a
                                th:href="@{${menuItem.status.href}}"
                                th:text="${menuItem.status.displayName}"
                                th:target="${menuItem.spec.target?.value}"
                        >
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>